<template>
<div>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <div class="center">
          <span class="bold">新用户变化趋势</span>
        </div>
        <div class="demo-date-picker">
          <div class="block">
            <span class="demonstration">选择查询的日期</span>
            <el-date-picker
                v-model="dateZone"
                type="daterange"
                unlink-panels
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                :size="size"
                @change="handleDateRangeChange"
            />
          </div>
        </div>
        <div style="width: 100%;height: 300px;" id="newUser_line"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div style="width: 100%;height: 300px;" id="gender_pie"></div>
      </el-card>
    </el-col>
  </el-row>
</div>
<br/>

  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div class="center">
            <span class="bold">查询交易额</span>
          </div>
          <div class="demo-date-picker">
            <div class="block">
              <span class="demonstration">选择查询的日期</span>
              <el-date-picker
                  v-model="dateZone_money"
                  type="daterange"
                  unlink-panels
                  range-separator="To"
                  start-placeholder="Start date"
                  end-placeholder="End date"
                  :size="size"
                  @change="handleDateRangeChange1"
              />
            </div>
          </div>
          <div style="width: 100%;height: 300px;" id="Money"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div style="width: 100%;height: 300px;" id="ipRatio"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
<br/>
  <br/>
  <div>
    <div style="width: 80%;height: 500px;" id="ipMoney"></div>
  </div>
</template>

<script>
//import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts';
import { ref } from 'vue'

const size = ref<'day' | 'week' | 'month'>('day')



 const option = {
   title: {
     text: '注册人数趋势图',
     subtext: '',
     left: 'center'
   },
   tooltip: {
     trigger: 'axis'
   },
   legend: {
     orient: 'vertical',
     left: 'left'
   },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name:'人数',
      data: [],
      type: 'line',
      smooth:true
    }
  ]
};


const option2 = {
  title: {
    text: '用户性别比例',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'gender_pie',
      type: 'pie',
      radius: '50%',
      data: [],
      label:{
        show:true,
        formatter(param){
          return param.name+'('+param.percent+'%)';
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

const option3 = {
  title: {
    text: '网站交易额',
    subtext: '',
    left: 'center'
  },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
  xAxis: {
    type: 'category',
    data: []
  },
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '金额',
        type: 'bar',
        barWidth: '50%',
        data: []
      }
    ]
  };

const option4 = {
  title: {
    text: 'IP分类占比',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'IP名称',
      type: 'pie',
      radius: '50%',
      data: [],
      label:{
        show:true,
        formatter(param){
          return param.name+'('+param.percent+'%)';
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};


const option5 = {
  title: {
    text: '各IP 交易额',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '金额',
      type: 'bar',
      barWidth: '30%',
      data: []
    },
    {
      name: '销量',
      type: 'bar',
      barWidth: '30%',
      data: []
    }
  ]
};
export default {
  name:"Charts",
  data() {
    return {
      dateZone_money:[],
      userGenderRatioData:[],
      genderDate: [],
      countlist:[],
      dateZone:[],
      dateRange1:{
        MoneyList:[],
        DateList1:[],
      },
      dateRange:{
        CountList:[],
        DateList: [], // 日期范围的值
        step:"day",
      },
      selectedValue: null, // 下拉框的值
      size: 'large' // 日期选择器的尺寸
    };
  },
  methods:{
    handleDateRangeChange(val) {
      console.log(val);
      this.DateList = [];
      for (let i = 0; i < val.length; i++) {
        this.DateList.push(this.formatDate(new Date(val[i])));
      }
      this.dateRange.DateList = this.getDatesBetween(this.DateList[0], this.DateList[1]);
      console.log(this.dateRange.DateList);
      this.CountNewUser(this.dateRange); // 传入 dateRange 参数
    },
    handleDateRangeChange1(val) {
      console.log(val);
      this.DateList1 = [];
      for (let i = 0; i < val.length; i++) {
        this.DateList1.push(this.formatDate(new Date(val[i])));
      }
      this.dateRange1.DateList1 = this.getDatesBetween(this.DateList1[0], this.DateList1[1]);
      console.log(this.dateRange1.DateList1);
      this.MoneyDay(this.dateRange1); // 传入 dateRange 参数
    },
    formatDate(date) {
      // 日期格式化函数，返回格式为 'yyyy-MM-dd' 的日期字符串
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    getDatesBetween(startDate, endDate) {
      const dates = [];
      let currentDate = new Date(startDate);
      const end = new Date(endDate);

      while (currentDate <= end) {
        dates.push(new Date(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
      }
      return dates;
    },
    MoneyDay(dateRange1){
      console.log(dateRange1);
      console.log(dateRange1.DateList1);
      this.$http.post("http://localhost:8080/order/MoneyByDay", {
        order_finishtime: dateRange1.DateList1,
        }).then((res) => {
        this.option3 = res.data;
        console.log(this.option3);
        console.log(this.option3.total_price);
        console.log(this.option3.order_finishtime);
        option3.xAxis.data=this.option3.order_finishtime.map(item => {return this.formatDate(new Date(item))});
        option3.series[0].data = this.option3.total_price.map(item => {return item});
        let lineDom2 = document.getElementById('Money');
        let lineChart2 = echarts.init(lineDom2);
        lineChart2.setOption(option3);
        console.log(option3.xAxis.data);
        console.log(option3.series[0].data);
      }).catch((err) => {
        console.log(err);
      });
    },
    CountNewUser(dateRange) {
      console.log(dateRange);
      console.log(dateRange.DateList);
      console.log(dateRange.step);
      this.$http.post("http://localhost:8080/user/newuser", {
        registration_date: dateRange.DateList,
        step: dateRange.step
      }).then((res) => {
        this.option = res.data;
        console.log(this.option);
        console.log(this.option.newuser_count);
        option.xAxis.data=this.option.registration_date.map(item => {return this.formatDate(new Date(item))});
        option.series[0].data = this.option.newuser_count.map(item => {return item});
        let lineDom = document.getElementById('newUser_line');
        let lineChart = echarts.init(lineDom);
        lineChart.setOption(option);
        console.log(option.xAxis.data);
        console.log(option.series[0].data);
      }).catch((err) => {
        console.log(err);
      });
    },
    UserGender() {
      this.$http.post("http://localhost:8080/user/genderRatio").then((res) => {
        console.log(res.data);
        let genders = res.data.gender;
        let values = res.data.value;
        for (let i = 0; i < genders.length; i++) {
          option2.series[0].data.push({ name: genders[i], value: values[i] });
        }
        console.log(this.option2);
        let chartDom1 = document.getElementById('gender_pie');
        let myChart1 = echarts.init(chartDom1);
        myChart1.setOption(option2);

      }).catch((err) => {
        console.error(err);
      });

    },
    ipRatioInfo(){
          this.$http.post("http://localhost:8080/category/IpRatio").then((res) => {
            console.log(res.data);
            let names = res.data.category_names;
            let counts = res.data.goods_counts;
            for (let i = 0; i < names.length; i++) {
              option4.series[0].data.push({ name: names[i], value: counts[i] });
            }
            console.log(this.option4);
            let chartDom3 = document.getElementById('ipRatio');
            let myChart3 = echarts.init(chartDom3);
            myChart3.setOption(option4);

          }).catch((err) => {
            console.error(err);
          });
    },
    ipMoneyandCount(){
      this.$http.post("http://localhost:8080/category/ipMoneyandcount").then((res) => {
        this.option5 = res.data;
        console.log(this.option5);
        console.log(this.option5.category_name);
        console.log(this.option5.total_sales);
        console.log(this.option5.sales_count);
        option5.xAxis.data=this.option5.category_name.map(item => {return item});
        option5.series[0].data = this.option5.total_sales.map(item => {return item});
        option5.series[1].data = this.option5.sales_count.map(item => {return item});
        let chartDom4 = document.getElementById('ipMoney');
        let myChart4 = echarts.init(chartDom4);
        myChart4.setOption(option5);
        console.log(option5.xAxis.data);
        console.log(option5.series[0].data);
        console.log(option5.series[1].data);
      }).catch((err) => {
        console.log(err);
      });
    }

  },
  mounted() {   //等待页面元素全部加载完毕后再初始化
    //用户的性别
    this.UserGender();
    //ip的金额和销量
    this.ipMoneyandCount();
    //ip的比例
    this.ipRatioInfo();

}
};
</script>

<style  >
.demo-date-picker {
  /* display: flex;  */
  width: 100%;
  padding: 0;
  flex-wrap: nowrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  /*text-align: right;*/
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
}

.bold {
  font-weight: bold;
}
</style>